<template>
  <div><br/>
    操作步骤：<br/>
    1、点击“选择文件”，选择要上传的文件<br/>
    2、点击“开始上传”，开始上传文件<br/>
    3、如需重新上传请重复上边的步骤。<br/><br/>

<!--    <p v-show="teachplanId!=null&&teachplanId!=''">传过来的planId:{{teachplanId}}</p>-->
    <p v-show="teachplanName!=null&&teachplanName!=''" style="color: darkred">上传完成后将自动关联:{{teachplanName}}</p>

    <div id="uploader" class="wu-example">
      <div class="btns" style="float:left;padding-right: 20px">
        <div id="picker">选择文件</div>
      </div>
      <div id="ctlBtn" class="webuploader-pick" @click="upload()">开始upload上传</div>

    </div>
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list">
      <div v-if="uploadFile.id" :id='uploadFile.id'><span>{{uploadFile.name}}</span>&nbsp;<span class='percentage'>{{percentage}}%</span>
      </div>

    </div>
  </div>
</template>
<script>
    import webuploader from '../../../../static/plugins/webuploader/dist/webuploader.js'
    import '../../../../static/css/webuploader/webuploader.css'

    export default {
        data() {
            return {
                uploader: {},
                uploadFile: {},
                percentage: 0,
                fileMd5: ''
            }
        },
        props: ['teachplanName'],
        methods: {
            //开始上传
            upload() {
                if (this.uploadFile && this.uploadFile.id) {
                    this.uploader.upload(this.uploadFile.id);
                } else {
                    alert("请选择文件");
                }
            }
        },
        mounted() {
            // 创建imageUploader对象，配置参数
            this.uploader = WebUploader.create({

                // 是否开起分片上传。
                chunked: false,
                //选择完文件或是否自动上传
                auto: false,
                //swf文件路径
                swf: 'Uploader.swf',
                // 上传并发数。允许同时最大上传进程数[默认值：3]   即上传文件数
                threads: 3,
                //文件接收服务端接口
                server: "http://localhost:31005/file/save",
                // 选择文件的按钮
                pick: '#picker',
                //上传请求的方法
                method: "POST",
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                //指定接受哪些类型的文件
                accept: {
                    title: 'Files',
                    extensions: 'gif,jpg,jpeg,bmp,png,pdf,doc,docx,txt,xls,xlsx,ppt,pptx,zip,mp3,mp4,text,csv,wmv,exe',
                    mimeTypes: 'image/*,text/!*'
                    // word:
                    + ',application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                    //excel
                    + ',application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    //ppt
                    + ',application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation'
                    + ',application/pdf'
                    + ',application/zip'
                    + ',application/csv'
                }
            });

            // 将文件添加到队列
            this.uploader.on("fileQueued", function (file) {
                    this.uploadFile = file;
                    this.percentage = 0;

                }.bind(this)
            );
            //选择文件后触发
            this.uploader.on("beforeFileQueued", function (file) {
                //this.uploader.removeFile(file)
                //重置uploader
                this.uploader.reset()
                this.percentage = 0;
            }.bind(this));

            // 监控上传进度
            // percentage:代表上传文件的百分比
            this.uploader.on("uploadProgress", function (file, percentage) {
                this.percentage = Math.ceil(percentage * 100);
            }.bind(this));
            //上传失败触发
            this.uploader.on("uploadError", function (file, reason) {
                alert("上传文件失败");
            });
            //上传成功触发
            this.uploader.on("uploadSuccess", (file, response) => {
                // alert(response.message);
                //能收到id了，直接调用api新增关联表
                //向父组件组传值
                if (this.teachplanName != null && this.teachplanName != '') {
                    this.$emit("getMediaData", response.message);
                }
                alert("上传文件成功！");
            });
            //每个分块上传请求后触发
            this.uploader.on('uploadAccept', function (file, response) {
                if (!(response && response.success)) {//分块上传失败，返回false
                    return false;
                }
            });


        }
    }

</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  /* 图片上传区域 */
  #uploadArea {
    width: 888px;
  }

  /* 承载Webuploader按钮的标签 */
  #imagePicker {
    display: block;
    margin: 6px;
  }

  #imagesList {
    position: relative;
    overflow: hidden;
  }

  #imagesList li {
    display: block;
    position: relative;
    width: 110px;
    height: 140px;
    margin: 10px;
    float: left;
  }

  /* 确认上传按钮 */
  #sureUpload {
    margin: 6px;
    height: 38px;
    padding: 0 20px;
    display: block;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: rgba(76, 175, 80, .9);
    border: none;
  }

  /* 图片删除按钮 */
  #imagesList li span.delete {
    z-index: 10;
    width: 18px;
    height: 18px;
    background-color: red;
    display: block;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: -4px;
    top: -10px;
  }

  /* 预览图片大小 */
  #imagesList li img {
    width: 100%;
  }

  /* 文件名 */
  #imagesList li p.filename {
    text-align: center;

    /* 多的内容换行 */
    /* word-wrap: break-word;
              word-break: break-all; */
    /* 多的部分截断 用...代替*/
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  /* 上传进度条状态样式 */
  .wait,
  .error,
  .success,
  .progress {
    width: 100%;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: -1px;
    left: 0;
  }

  /* 等待上传 */
  .wait {
    background-color: rgba(158, 158, 158, .5);
  }

  /* 上传出错 */
  .error {
    background-color: rgba(255, 0, 0, .5);
    color: #fff;
  }

  /* 上传成功 */
  .success {
    background-color: rgba(76, 175, 80, .9);
    color: #fff;
  }

  /* 上传中 */
  .progress {
    background-color: rgba(255, 235, 59, .7);
    color: #fff;
  }

  .webuploader-container {
    position: relative;
  }

  .webuploader-element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }

  .webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #00b7ee;
    padding: 10px 15px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
  }

  .webuploader-pick-hover {
    background: #00a2d4;
  }

  .webuploader-pick-disable {
    opacity: 0.6;
    pointer-events: none;
  }


</style>
